<template>
    <div ref="chart" id="chart"></div>
</template>
<script lang='ts' setup>
import { useDebounceFn } from '@vueuse/core';
import { inject, onMounted, ref, watch } from 'vue';


const props = defineProps<{
    title?: string,
    textColor?: string
    Data: string[],
    color?: string[]
}>()

const echarts = inject('echarts') as any
const chart = ref()
const color = ['#975FE5', '#5771ff', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#5fffe4']

let chartInstance: any

watch(() => props.Data, () => {
    if (chartInstance) {
        chartInstance.clear()
        const options = getOption()
        // console.log(options);

        chartInstance.setOption(options)
    }
}, { deep: true })

function getSeries() {
    // console.log(props.Data);

    const data: any = props.Data.slice(1).map((item, index) => (
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            label: {
                show: true,
                color: 'inherit'
            },
            emphasis: { focus: 'series' },
        }
    ))

    return data.concat({
        type: 'pie',
        id: 'pie',
        radius: ['30%', '45%'],
        center: ['50%', '25%'],
        emphasis: {
            focus: 'self',
            label: {
                show: true
            }
        },
        label: {
            formatter: `{b}\n{@${props.Data[0][1]}}个({d}%)`,
            position: 'center'
        },
        encode: {
            itemName: props.Data[0][0],
            value: props.Data[0][1],
            tooltip: props.Data[0][1]
        }
    })
}


function getOption() {
    return {
        title: {
            text: props.title,
            textStyle: {
                fontSize: 14,
                fontFamily: '黑体',
                color: props.textColor ? props.textColor : '#fff'
            }
        },
        color: props.color ? props.color : color,
        legend: {
            type: 'scroll',
            orient: 'vertical',
            height: '50%',
            top: 0,
            right: 0
        },
        tooltip: {
            trigger: 'axis',
        },
        dataset: {
            source: props.Data
        },
        xAxis: { type: 'category' },
        yAxis: { gridIndex: 0 },
        grid: { top: '55%' },
        dataZoom: {
            start: 0,
            end: 100
        },
        series: getSeries()
    }
}

onMounted(() => {
    chartInstance = echarts.init(chart.value)
    const option = getOption()

    chartInstance.setOption(option)
    const handleResize = useDebounceFn(() => {
        chartInstance.resize()
    }, 1000)

    window.addEventListener('resize', () => handleResize())

    chartInstance.on('updateAxisPointer', function (event: any) {

        const xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
            const dimension = xAxisInfo.value + 1;

            chartInstance.setOption({
                series: {
                    id: 'pie',
                    label: {
                        // { b }\n{@${ props.Data[0][1] }} 个({ d } %)
                        formatter: '{b}\n{@[' + dimension + ']}个({d}%)'
                    },
                    encode: {
                        value: dimension,
                        tooltip: dimension
                    }
                }
            });
        }
    });
})


</script>
<style lang='scss' scoped>
#chart {
    width: 100%;
    height: 100%;
}
</style>